﻿﻿<div class="form-group">
  <label class="col-sm-3 control-label">{{ name }}</label>
  <div class="col-sm-9">
    <div class="input-groups">
      <div class="input-group" v-for="(item, index) in values" :data-id="index">
        <input
          v-model="item.key"
          type="text"
          class="form-control key"
          placeholder="Key"
        />
        <span class="input-group-addon">-</span>
        <input
          v-model="item.value"
          type="text"
          class="form-control value"
          placeholder="Value"
        />
        <span class="input-group-btn"
          ><a
            @click="remove(index)"
            v-kb-tooltip="Kooboo.text.common.remove"
            class="btn btn-default"
            href="javascript:;"
            ><i class="fa fa-minus"></i></a
        ></span>
      </div>
      <a
        @click="add"
        v-kb-tooltip="Kooboo.text.common.add"
        class="btn btn-default"
        href="javascript:;"
        ><i class="fa fa-plus"></i
      ></a>
    </div>
  </div>
</div>
